<template>
  <el-drawer v-model="drawerVisible" :append-to-body="true" :destroy-on-close="true" size="1000px" title="案件详情">
    <div class="case-detail-wrap">
      <el-form ref="ruleFormRef" label-position="top" require-asterisk-position="right" class="form-detail">
        <div class="p-title mb-12">案件信息</div>
        <div class="form-inline-wrap">
          <el-form-item label="案件号">
            <div>AJ202405061234</div>
          </el-form-item>
          <el-form-item label="案件名称">
            <div>中科-01类-北京中科同志科技有限公司</div>
          </el-form-item>
          <el-form-item label="申请号/注册号">
            <div>48597895</div>
          </el-form-item>
          <el-form-item label="商标名称">
            <div>中科</div>
          </el-form-item>
          <el-form-item label="类别">
            <div class="sub-list flx">
              <div class="count">0101(5个)</div>
              <div class="tag-list flx-1">
                <el-tag type="primary" v-for="item in 5" :key="item">010039碱土金属</el-tag>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="案件状态">
            <div>申请收文</div>
          </el-form-item>
          <el-form-item label="更新时间">
            <div>2024-06-10 09:29</div>
          </el-form-item>
        </div>
      </el-form>
      <div class="case-info-card">
        <div class="title">商标流程状态</div>
        <div class="status-list">
          <div class="status-item" v-for="(item, index) in 3" :key="index">
            <div class="index">{{ index + 1 }}</div>
            <div class="time color-45">2024-06-10</div>
            <div class="desc color-88">商标注册申请 | 申请收文</div>
          </div>
        </div>
      </div>

      <div class="case-info-card mt-20">
        <div class="title">商标公告</div>
        <div class="status-list">
          <div class="status-item" v-for="(item, index) in 3" :key="index">
            <div class="time color-65">2024-06-10</div>
            <div class="desc color-65">第1853期 商标注册公告（一）</div>
            <div class="view flx-align-center text-primary">
              <el-icon><Search /></el-icon>
              查看
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";

const drawerVisible = ref(false);
const formParams = ref({});
const drawerProps = ref({
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = params => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
.case-detail-wrap {
  .form-inline-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .el-form-item {
    width: calc(50% - 10px);
  }

  .tag-list {
    .el-tag {
      margin-left: 8px;
    }
  }

  .case-info-card {
    border-radius: 4px;
    border: 2px solid #f2f5fc;

    .title {
      height: 40px;
      line-height: 40px;
      padding: 0 8px;
    }

    .status-list {
      padding: 16px;

      .status-item {
        padding-bottom: 8px;
        display: flex;
        align-items: center;

        &:last-child {
          padding-bottom: 0;
        }

        .index {
          width: 32px;
          height: 32px;
          line-height: 32px;
          background: #1890ff;
          border-radius: 50%;
          font-size: 16px;
          color: #fff;
          text-align: center;
          margin-right: 16px;
        }
        .color-45 {
          color: rgba(0, 0, 0, 0.45);
        }
        .color-65 {
          color: rgba(0, 0, 0, 0.65);
        }
        .color-88 {
          color: rgba(0, 0, 0, 0.88);
        }
        .time {
          margin-right: 40px;
        }
        .view {
          margin-left: 12px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
